<template>
  <div id="masterEditRepair">
    <div class="headerDiv">
      <div class="listCellDiv" @click="clickPepairType">
        <div class="leftDiv">
          <span class="title">维修类型</span>

          <div class="rightDivColumn" >
            <span class="subtitle noContent" v-show="selectType === ''"
              >请选择报修类型</span
            >
            <span class="subtitle" v-show="selectType !== ''">{{
              selectType
            }}</span>
            <span class="subtitle" v-show="selectType !== ''">{{
              selectContent
            }}</span>
          </div>
        </div>

        <img :src="rightArrow" class="rightarrow" />
      </div>

      <div class="listCellDiv" @click="orderPriceClick">
        <div class="leftDiv">
          <span class="title">上门费</span>
          <input placeholder="请输入价格" class="subtitle" v-model="doorFee" ref="focusOrderPrice"/>
        </div>
      </div>

      <div class="listCellDiv" @click="servicePriceClick">
        <div class="leftDiv">
          <span class="title">服务费</span>
          <input
            placeholder="请输入价格"
            class="subtitle"
            v-model="serviceFee"
            ref="focusServicePrice"
          />
        </div>
      </div>

      <div class="listCellDiv listCellNoBottom" @click="bomFeePriceClick">
        <div class="leftDiv">
          <span class="title">材料费</span>
          <input placeholder="请输入价格" class="subtitle" v-model="bomFee" ref="focusBomFeePrice"/>
        </div>
      </div>
    </div>

    <div class="bottomDiv">
      <div class="bottomTitle">维修内容描述</div>
      <textarea
        class="textarea"
        placeholder="请描描述一下您的维修内容,限制在100字以内"
        v-model="remark"
        maxlength="50"
        @blur="fixScroll"
      >
      </textarea>
      <div class="bottomTitle">请上传图片</div>
      <van-uploader
        v-model="fileList"
        multiple
        :max-count="3"
        :before-read="beforeRead"
        :after-read="afterRead"
        :before-delete="beforeDelete"
      >
        <!--<van-button icon="photo" type="primary">上传图片</van-button>-->

        <div class="cameraDiv">
          <img :src="camera" class="cameraImg" />
          <div class="cameraTitle">{{ imageStr }}</div>
        </div>
      </van-uploader>
    </div>
    <div class="submitOrderDiv">
      <div class="submitOrderTitleDiv">
        <div class="yugu">用户需支付：</div>
        <div class="y">¥</div>
        <div class="price">{{ totalPrice }}</div>
      </div>

      <div class="button" @click="submit">提交</div>
    </div>

    <SelectAreaPopup
      title="报修区域"
      v-bind:showArea="showArea"
      :closeArea="closeArea"
      :selectItem="selectItem"
    ></SelectAreaPopup>
    <SelectRepairTypePopup
      title="报修服务"
      v-bind:showArea="showPepairTyp"
      :closeArea="closePepairType"
      :selectItem="selectPepairType"
    ></SelectRepairTypePopup>
    <SelectRepairTypePopup
      title="报修服务"
      v-bind:typeArray="typeArray"
      v-bind:showArea="showPepairTyp"
      :closeArea="closePepairType"
      :selectItem="selectPepairType"
    ></SelectRepairTypePopup>
  </div>
</template>

<script>
import SelectAreaPopup from "./components/SelectAreaPopup";
import SelectRepairTypePopup from "./components/SelectRepairTypePopup";
import {
  isPhoneNum,
  addImagePrefix,
  removeImagePrefix,
  validMoney,
  isWeixinBrowser
} from "@/utils/utils";
import { api_orderRepaired } from "@/service/api/repair";
import { api_upLoad } from "@/service/api/upLoad";
export default {
  name: "MasterEditRepair",
  data() {
    return {
      rightArrow: require("@/images/icon/order/right_arrow.png"),
      camera: require("@/images/icon/order/camera.png"),
      repairType: "请选择报修类型",
      showArea: false,
      showPepairTyp: false,
      selectType: "",
      selectContent: "",
      selectPriceContent: "",
      selectPrice: 0,
      number: null,
      repairTypeId: "",
      repairContentId: "",
      repairAreaId: "",
      remark: "",
      // 上门费
      doorFee: "50",
      // 物料费
      bomFee: "",
      // 服务费
      serviceFee: "",
      orderId: this.$route.query.orderId,
      // 文件上传列表
      fileList: [],
      urlfileList: []
    };
  },
  computed: {
    imageStr() {
      console.log(this.fileList);

      if (this.fileList.length == 0) {
        return "添加图片";
      } else if (this.fileList.length == 1) {
        return "1/3";
      } else if (this.fileList.length == 2) {
        return "2/3";
      } else {
        return "图片上限";
      }
    },
    areaHasContent() {
      if (this.area === "请选择报修区域") {
        return false;
      }
      return true;
    },
    repairTypeHasContent() {
      if (this.repairType === "请选择报修类型") {
        return false;
      }
      return true;
    },
    totalPrice() {
      var total = 0;

      if (this.doorFee) {
        total += parseFloat(this.doorFee);
      }
      if (this.bomFee) {
        total += parseFloat(this.bomFee);
      }
      if (this.serviceFee) {
        total += parseFloat(this.serviceFee);
      }

      return total;
    }
  },
  methods: {
      orderPriceClick(){
          this.$refs.focusOrderPrice.focus();
      },
      servicePriceClick(){
          this.$refs.focusServicePrice.focus();
      },
      bomFeePriceClick(){
          this.$refs.focusBomFeePrice.focus();
      },
      fixScroll() {

          let u = navigator.userAgent;

          let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

          if (isiOS) {

              window.scrollTo(0, 0);

          }

      },
      beforeRead(){
          this.$toast.loading(
              {
                  message:'图片读取中'
              }
          );
          return true;
      },
    afterRead(files) {
      // urlfileList 确保列表中都显示的是 远程图片  filelist中会默认添加本地图片 所以要覆盖一下

        this.$toast.loading(
            {
                duration:5000,
                message:'图片上传中'
            }
        );


        if (files instanceof Array) {
        for (var i = 0; i < files.length; i++) {
          var file = files[i];
          api_upLoad(file.file)
            .then(res => {
              this.urlfileList.push({ url: addImagePrefix(res.data.url) });
              this.fileList = this.urlfileList;
            })
            .catch(error => {
              this.fileList = this.urlfileList;
              this.$toast(error.message);
            });
        }
      } else {
        api_upLoad(files.file)
          .then(res => {
            this.urlfileList.push({ url: addImagePrefix(res.data.url) });
            this.fileList = this.urlfileList;
          })
          .catch(error => {
            this.fileList = this.urlfileList;
            this.$toast(error.message);
          });
      }
    },

    beforeDelete(file) {
      for (var i = 0; i < this.urlfileList.length; i++) {
        var fileUrl = this.urlfileList[i].url;
        if (fileUrl === file.url) {
          this.urlfileList.splice(i, 1);
          this.fileList = this.urlfileList;
          return;
        }
      }
    },
    clickArea() {
      this.showArea = true;
    },
    closeArea() {
      this.showArea = false;
    },
    selectItem(item) {
      this.area = item.areaName;
      this.repairAreaId = item.id;

      this.showArea = false;
    },
    clickPepairType() {
      this.showPepairTyp = true;
    },
    closePepairType() {
      this.showPepairTyp = false;
    },
    selectPepairType(item) {
      this.selectType = item.typeItem.typeName;
      this.selectContent = item.contentItem.contentName;
      this.selectPriceContent =
        item.contentItem.price + "/" + item.contentItem.unit;
      this.selectPrice = item.contentItem.price;

      this.repairTypeId = item.typeItem.id;
      this.repairContentId = item.contentItem.id;

      this.showPepairTyp = false;
    },
    submit() {
      if (this.repairTypeId === "") {
        this.$toast("请选择报修类型");
        return;
      }
      if (this.repairContentId === "") {
        this.$toast("请选择报修内容");
        return;
      }

      if (!validMoney(this.doorFee)) {
        this.$toast("上门费格式有误");
        return;
      }

      if (this.serviceFee !== "" && !validMoney(this.serviceFee)) {
        this.$toast("服务费格式有误");
        return;
      }

      if (this.bomFee !== "" && !validMoney(this.bomFee)) {
        this.$toast("材料费格式有误");
        return;
      }

      var urlList = "";
      for (var i = 0; i < this.fileList.length; i++) {
        var file = this.fileList[i];
        if (i == 0) {
          urlList += removeImagePrefix(file.url);
        } else {
          urlList = urlList + "," + removeImagePrefix(file.url);
        }
      }

      let data = {
        orderId: this.orderId,
        repairTypeId: this.repairTypeId,
        repairContentId: this.repairContentId,
        remark: this.remark,
        imgUrls: urlList,
        doorFee: this.doorFee,
        bomFee: this.bomFee,
        serviceFee: this.serviceFee
      };

      api_orderRepaired(data)
        .then(() => {
          this.$toast("提交成功");
          this.$router.back();
        })
        .catch(error => {
          this.$toast(error.message);
        });
    }
  },
  components: {
    SelectAreaPopup,
    SelectRepairTypePopup
  }
};
</script>

<style scoped lang="less">
#masterEditRepair {
  position: relative;
  top: 0;
  left: 0;
  /*right: 0;*/
  /*bottom: 0;*/
  width: 100%;
  height: 100%;
  z-index: 200;
  overflow: auto;
  background-color: #f6f8fb;
}

.headerDiv {
  padding: 0 20px;
  width: 100%;
  background-color: white;
}
.middleDiv {
  background-color: white;

  padding: 0 20px;
  width: 100%;
  margin-top: 0.8rem;
}

.bottomDiv {
  background-color: white;
  padding: 0 20px;
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 10rem;
  /*align-items: center;*/
}
.listCellDiv {
  border-bottom: 0.5px solid #f0f1f5;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  padding: 1rem 0;
}
.listCellNoBottom {
  border-bottom: 0.5px solid white;
}
.leftDiv {
  width: 95%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.rightDivColumn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
.rightDivRow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.title {
  height: 1.5rem;
  font-size: 1rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.5rem;
}
.subtitle {
  height: 1.3333333333333333rem;
  font-size: 0.9333333333333333rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(122, 132, 145, 1);
  line-height: 1.3333333333333333rem;
}

.rightarrow {
  width: 0.43333333333333335rem;
  height: 0.7333333333333333rem;
}

.bottomTitle {
  margin: 1rem 0;
  height: 1.4rem;
  font-size: 1rem;
  font-family: PingFangSC-Medium, PingFangSC;
  font-weight: 500;
  color: rgba(18, 28, 50, 1);
  line-height: 1.4rem;
}
.cameraDiv {
  width: 5rem;
  height: 5rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.26666666666666666rem;
  border: 1px solid rgba(240, 241, 245, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cameraImg {
  width: 1.0666666666666667rem;
  height: 1.0666666666666667rem;
  margin-bottom: 0.3333333333333333rem;
}
.cameraTitle {
  margin-top: 0.3333333333333333rem;
  height: 1.1rem;
  font-size: 0.8rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(191, 195, 205, 1);
  line-height: 1.1rem;
}

.submitOrderDiv {
  background-color: white;
  padding: 0 20px;
  width: 100%;
  height: 4.2666666666666666rem;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  overflow: auto;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.submitOrderTitleDiv {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-end;
}
.yugu {
  height: 1.1rem;
  font-size: 0.8rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(122, 132, 145, 1);
  line-height: 1.1rem;
}
.y {
  width: 0.4666666666666667rem;
  height: 1.2rem;
  font-size: 1.2rem;
  font-family: DINCondensed-Bold, DINCondensed;
  font-weight: bold;
  color: rgba(242, 62, 84, 1);
  line-height: 1.2rem;
  vertical-align: bottom;

}
.price {

  height: 1.7rem;
  font-size: 2rem;
  font-family: DINCondensed-Bold, DINCondensed;
  font-weight: bold;
  color: rgba(242, 62, 84, 1);
  line-height: 2.0rem;
  vertical-align: bottom;

}
.button {
  width: 10.333333333333334rem;
  height: 2.6666666666666665rem;
  background: #397be6;
  border-radius: 1.6333333333333333rem;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

textarea {
  height: 7rem;
  width: 100%;
  background-color: #f6f8fb;
  padding: 1rem;

  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: #7a8491;

  line-height: 1.2333333333333334rem;
}

textarea::-webkit-input-placeholder {
  height: 2.466666666666667rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(191, 195, 205, 1);
  line-height: 1.2333333333333334rem;
}

textarea::-moz-placeholder {
  height: 2.466666666666667rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(191, 195, 205, 1);
  line-height: 1.2333333333333334rem;
}
textarea:-ms-input-placeholder {
  height: 2.466666666666667rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(191, 195, 205, 1);
  line-height: 1.2333333333333334rem;
}

input {
  text-align: right;
}

input::-webkit-input-placeholder {
  color: #bfc3cd;
}
input::-moz-placeholder {
  color: #bfc3cd;
}
input::-ms-input-placeholder {
  color: #bfc3cd;
}

.noContent {
  color: #bfc3cd;
}
.hasContent {
  color: rgba(122, 132, 145, 1);
}
.redText {
  height: 1.1rem;
  font-size: 0.8rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(242, 62, 84, 1);
  line-height: 1.1rem;

  margin-top: 0.7rem;
}
</style>
